<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<script type="text/javascript" charset="UTF-8">
	var loginAndReg;
	var loginInputForm;
	var regDialog;
	var regInputForm;
	//var margin = '-80';// by codex 2013-4-13 18:56:44 for showing navigation or not 

	$(document).ready(function(){
		
		loginInputForm = $('#loginInputForm').form({//登陆对话框表单初始化
			url : 'loginAction',
			onSubmit : function(){
			},
			success : function(r){
			r = eval("("+r+")"); //原来返回的r是一个字符串，这句话把r转换为了一个JSON对象
			r = eval("("+r+")");    
			if(r && r.success){
				console.info(r);
				$('#loginDialog').dialog('close');
				showNavigation('-80');

			}
			else{
				$.messager.alert("出错咯！",r.msg);
				}
			}
		});

		loginDialog = $('#loginDialog').dialog({//登陆对话框初始化
			modal : true,
			title : "LOGIN",
			closable : false,
			buttons : [{
				text : '游客访问',
				handler : function(){
					$('#loginDialog').dialog('close');
					showNavigation('-200');
					//$('#regDialog').dialog("close");
				}
			},{
				text : '注册',
				handler : function(){
					$('#regDialog').dialog('open');
					$('#loginDialog').dialog('close');
				}
			},{
				text : '登录',
				handler : function(){
					loginInputForm.submit();
					//showNavigation('-80');
				}
			}]
		});

		regDialog = $('#regDialog').dialog({//注册对话框初始化
			modal : true,
			title : "注册",
			closable : false,
			closed : true,
			buttons : [{
				text : '返回',
				handler : function(){
					//$('#regInputForm').form("clear");
					$('#regDialog').dialog('close');
					$('#loginDialog').dialog('open');
				}
			},{
				text : '提交',
				handler : function(){
					if ($('#uname').validatebox('isValid') && $('#pwd').validatebox('isValid') && $('#rpwd').validatebox('isValid') 
						&& $('#email').validatebox('isValid') && validateNameFlag) {
						regInputForm.submit();
					}
					
				}
			}]
		});


		regInputForm = $('#regInputForm').form({ //注册对话框表单初始化
			url : 'registerAction',
			onSubmit : function(){
			},
			success : function(r){
				r = eval("("+r+")"); //原来返回的r是一个字符串，这句话把r转换为了一个JSON对象
				r = eval("("+r+")");
				if (r && r.success) {
					$('#regDialog').dialog('close');
				}
				else{
					$.messager.alert("出错咯！",r.msg);
				}
			}
		});

		$.extend($.fn.validatebox.defaults.rules, {  //验证两次密码是否一致
		equals: {
			validator: function(value,param){
			return value == $(param[0]).val();
			},
			message: '两次输入的密码不一致！'
			}
		});

});
</script>
<script type="text/javascript" charset="UTF-8">
	var validateNameFlag;
	function validateName() {
	//请求的地址
		if ($('#regInputForm input[name=username]').val() == '') {
			$('#validTip span').removeClass();
			$('#validTip').removeClass();
			$('#validTip').toggleClass("regtips-1");
			$('#validTip span').toggleClass("regtips-2");
			$('#validTip span').html("&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp用户名不能为空！");
			validateNameFlag = false;
		}
		else{
			$.ajax({
				url  : 'validateNameAction',//validateName
				type : "post",
				data : 
					{username : $('#regInputForm input[name=username]').val()},
				cache : false,
				datatype : 'json',
				success : function(r){
					r = eval("("+r+")");
					if (r && r.validate) {
						//数据库中已经有该用户名
						$('#validTip span').removeClass();
						$('#validTip').removeClass();
						$('#validTip').toggleClass("regtips-1");
						$('#validTip span').toggleClass("regtips-2");
						$('#validTip span').html("&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp账号已经被注册！");
						validateNameFlag = false;
					}
					else{
						$('#validTip span').removeClass();
						$('#validTip').removeClass();
						$('#validTip').toggleClass("regtips-3");
						$('#validTip span').html("&nbsp");
						validateNameFlag = true;
					}
				}
			});
		}
	}
	function changeValidateCode(obj) { 
	      //获取当前的时间作为参数，无具体意义 
	     var timenow = new Date().getTime(); 
	      //每次请求需要一个不同的参数，否则可能会返回同样的验证码 
	      //这和浏览器的缓存机制有关系，也可以把页面设置为不缓存，这样就不用这个参数了。 
	      obj.src="randAction.action?d=" + timenow; 
	} 

	function validateEmail() {
		//请求的地址
		$.ajax({
			url: 'validateNameAction!ValidateEamil.action',
			type: "post",
			data: {
				email: $('#regInputForm input[name=email]').val()
			},
			cache: false,
			datatype: 'json',
			success: function(r) {
				r = eval("(" + r + ")");
				if (r && r.validate) {
					//数据库中已经有该用户名
					$('#validEmailTip span').removeClass();
					$('#validEmailTip').removeClass();
					$('#validEmailTip').toggleClass("regtips-1");
					$('#validEmailTip span').toggleClass("regtips-2");
					$('#validEmailTip span').html("&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp邮箱已经被注册！");
				} else {
					$('#validEmailTip span').removeClass();
					$('#validEmailTip').removeClass();
					$('#validEmailTip').toggleClass("regtips-3");
					$('#validEmailTip span').html("&nbsp");
				}
			}
		});
	}

</script>
<body>
	<div id="loginDialog"  style="width:280px;height:200px">
		<form id="loginInputForm" method='post'>
			<table style="margin:auto">
				<tr>
					<th align="right">用户名</th>
					<td><input  name="username" class="easyui-validatebox" required="true" missingMessage="亲，请输入你的用户名！"></td>
				</tr>
				<tr>
					<th align="right">密码</th>
					<td><input name="password" type="password" class="easyui-validatebox" required="true" missingMessage="亲，密码还没写呢！"></td>
				</tr>
				<tr>
					<th align="right">验证码</th>
					<td><input name="code" class="easyui-validatebox" maxlength="4" required="true" missingMessage="亲，请输入验证码！"></td>
				</tr>
				<tr>
					<th align="right"></th>
					<td><img style="margin-top:5px;"src="randAction" onclick="changeValidateCode(this)" alt=""/><span>点击刷新</span></td>
				</tr>
			</table>
		</form>
	</div>

	<div id="regDialog" style="width:480px;height:300px">
		<form id="regInputForm" method='post'>
			<table style="float:left">
				<tr >
					<th align="right">用户名</th>
					<td><input id="uname" name="username" class="easyui-validatebox" required="true" validType="length[0,20]"
					missingMessage="亲，请输入用户名！" onblur="validateName();"></td>
					<td> <div id="validTip"><span></span></div> </td>
				</tr>
				<tr>
					<th align="right">密码</th>
					<td><input id="pwd" name="password" type="password" class="easyui-validatebox" required="true"
					validType="length[6,15]" missingMessage="亲，密码还没写呢！"></td>
				</tr>
				<tr>
					<th align="right">确认密码</th>
					<td><input  id="rpwd" name="rpassword" type="password" class="easyui-validatebox" required="true"
					validType="equals['#pwd']" missingMessage="亲，请再次确认你的密码！"></td>
				</tr>
				<tr>
					<th align="right">Email</th>
					<td><input id="email" name="email" class="easyui-validatebox" required="true" missingMessage="亲，邮箱一定要写哦！" validType="email" onblur="validateEmail();"></td>
					<td> <div id="validEmailTip"><span></span></div> </td>

				</tr>
				<tr>
					<th align="right">验证码</th>
					<td><input  id="yzm" name="code" class="easyui-validatebox" required="true" missingMessage="亲，请输入验证码！"></td>
				</tr>
				<tr>
					<th align="right"></th>
					<td><img src="randAction" onclick="changeValidateCode(this)" alt="看不清楚？点击刷新"/></td>
				</tr>
			</table>
		</form>
	</div>
</body>